<template>
	<view class="container">
		<view class="container_content">
			<view class="container_login">
				<view class="container_head">
					<image src="@/static/assets/public/logo.png" class="container_head_title_logo"></image>
					<view class="container_head_title">
						{{$t('index.title')}}·{{$t('index.subTitle')}}
					</view>
				</view>
				<view class="container_login_form">
					<view class="container_login_form_content">
						<text class="container_login_form_content_txt">{{$t('index.account')}}</text>
						<view
							:class="usernameTxt==true?'container_login_form_content_warningInput':'container_login_form_content_input'">
							<input :placeholder="$t('index.inputAccount')" v-model="form.username"
								@input="usernameInput" @confirm="login" />
							<i v-if="form.username" class="iconfont icon-qingchu" @tap="usernameClear"></i>
						</view>
						<text v-show="usernameTxt"
							class="container_login_form_content_warningTxt">{{$t('index.inputAccount')}}</text>
					</view>
					<view class="container_login_form_content">
						<text class="container_login_form_content_txt">{{$t('index.password')}}</text>
						<view
							:class="passwordTxt==true?'container_login_form_content_warningInput':'container_login_form_content_input'">
							<input :type="passwordType==true?'password':''" :placeholder="$t('index.inputPassword')"
								v-model="form.password" @input="passwordInput" @confirm="login" />
							<i v-if="form.password"
								:class="passwordType==true?'iconfont icon-mimabukejian':'iconfont icon-mimakejian'"
								@tap="openPsw" style="font-size:42rpx;color: #222;padding: 0 20rpx;"></i>
							<i v-if="form.password" class="iconfont icon-qingchu" @tap="passwordClear"></i>
						</view>
						<text v-show="passwordTxt"
							class="container_login_form_content_warningTxt">{{$t('index.inputPassword')}}</text>
					</view>
					<checkbox-group>
						<label>
							<checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw"
								color="#09CC86" />{{$t('index.remember')}}
						</label>
					</checkbox-group>
				</view>
				<view class="container_login_btn">
					<button @tap="jumpIP()">{{$t('index.IPSet')}}</button>
					<button type="primary" @tap="login()">{{$t('index.login')}}</button>
				</view>
			</view>

		</view>
		<!-- 串口扫描 -->
		<swip-code />
	</view>
</template>
<script>
	import {
		login,
		loginInfo
	} from "../../api/index.js"
	import swipCode from "@/components/swip-code/swip-code.vue";
	import socket from "@/common/socket.js"; //引入websocket文件
	export default {
		components: {
			swipCode
		},
		data() {
			return {
				form: {
					username: '', //账号
					password: '', //密码
				},
				passwordType: true,
				usernameTxt: false,
				passwordTxt: false,
				rememberPsw: true,
			};
		},
		mounted() {
			//页面加载完成，获取本地存储的用户名及密码
			const userName = uni.getStorageSync('userName');
			const userPsw = uni.getStorageSync('userPsw');
			let that = this;
			if (userName && userPsw) {
				that.form.username = userName;
				that.form.password = userPsw;
			} else {
				that.form.username = "";
				that.form.password = "";
			}
			if (uni.getStorageSync('token') != "") {
				loginInfo({
					token: uni.getStorageSync('token'),
				}).then((res) => {
					socket.getWebsocket(res.id)
					this.$store.commit('loginList', res)
					uni.showToast({
						title: this.$t('index.loginSuccess'),
						icon: "none",
						duration: 3000
					})
					uni.reLaunch({
						url: "../HomePage/index"
					})
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			}
		},
		methods: {
			// 清除输入框内容
			usernameClear() {
				this.form.username = ''
			},
			passwordClear() {
				this.form.password = ''
			},
			openPsw() {
				this.passwordType = !this.passwordType
			},
			//input框输入内容，form校验结束
			usernameInput() {
				this.usernameTxt = false
			},
			passwordInput() {
				this.passwordTxt = false
			},
			//  登录
			login() {
				//用户勾选“记住密码”
				if (this.rememberPsw == true) {
					uni.setStorageSync('userName', this.form.username);
					uni.setStorageSync('userPsw', this.form.password);
				}
				if (this.form.username == '' && this.form.password == '') {
					this.usernameTxt = true
					this.passwordTxt = true
				} else if (this.form.password == '') {
					this.passwordTxt = true
				} else if (this.form.username == '') {
					this.usernameTxt = true
				} else {
					login({
						username: this.form.username,
						password: this.form.password,
					}).then((res) => {
						this.token = res.token
						uni.setStorage({
							key: 'token',
							data: this.token
						})
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
						loginInfo({
							token: this.token,
						}).then((res) => {
							socket.getWebsocket(res.id)
							this.$store.commit('loginList', res)
							uni.reLaunch({
								url: "../HomePage/index"
							})
						})
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}).catch((res) => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					});
				}
			},
			//跳转IP设置页面
			jumpIP() {
				uni.navigateTo({
					url: '../Serve/index'
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		background-image: url(../../static/assets/index/bg.png);
		background-size: 100%;
		background-repeat: no-repeat; //将图片样式不重复
		background-size: 100% 100%; //设置图片大小
		position: fixed;
		/* 充满全屏 */
		height: 100%; //设置div高度
		width: 100%; //设置div宽度
	}

	.container_content {
		width: 100%;
		height: 100%;
		margin-top: 30vh;
		position: absolute;
	}

	.container_login {
		width: calc(100% - 140rpx);
		height: calc(100% - 30vh);
		padding: 0 70rpx;
		background-color: #ffffff;
		border-radius: 80rpx 80rpx 0 0;
	}

	.container_head {
		height: 20%;
		text-align: center;
		margin: auto;
		// padding-bottom: 20rpx;
	}

	.container_head_title {
		font-size: 42rpx;
		font-weight: bolder;
		text-indent: 4rpx;
	}

	.container_head_title_logo {
		width: 100rpx;
		height: 100rpx;
	}

	.container_login_form {
		font-size: 36rpx;
		height: 50%;
	}

	.container_login_form_content {
		margin-bottom: 50rpx;
	}

	.container_login_form_content:hover {
		margin-bottom: 50rpx;
		color: #409efe;
		border-bottom: 1px solid #409efe;
	}

	.container_login_form_content_txt {
		font-weight: bold;
	}

	.container_login_form_content_input {
		display: flex;
		border-bottom: 1px solid #e9e9e9;
	}

	.container_login_form_content_warningInput {
		display: flex;
		border-bottom: 1px solid red;
	}

	.container_login_form_content_input input {
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
	}

	.container_login_form_content_input i {
		line-height: 90rpx;
		color: #e9e9e9;
	}

	.container_login_form_content_warningTxt {
		color: red;
	}

	.container_login_btn {
		text-align: center;
		height: 30%;
	}

	//清除原生样式
	button::after {
		border: 0; // 或者 border: none;
	}

	.container_login_btn_set {
		background-color: #FFFFFF;
	}

	.container_login_btn button {
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		font-weight: bold;
		margin: 30rpx 0;
	}
</style>